<div class="motorOutputReorderComponent">
    <h3 i18n="motorsRemapDialogTitle" class="motorOutputReorderComponentHeader"></h3>
    <div class="componentContent" id="dialogMotorOutputReorderMainContent">
        <canvas id="motorOutputReorderCanvas"></canvas>
        <div id="motorOutputReorderActionPanel">
            <h4 id="motorOutputReorderActionHint"></h4>
        </div>
        <div id="motorOutputReorderSaveStartOverButtonsPanel">
            <a href="#" id="motorsRemapDialogSave" class="regular-button left" i18n="motorsRemapDialogSave"></a>
            <a href="#" id="motorsRemapDialogStartOver" class="regular-button left" i18n="motorsRemapDialogStartOver"></a>
        </div>
    </div>
    <div class="componentContent" id="dialogMotorOutputReorderWarning">
        <div class="notice">
            <p class="motorsRemapDialogRiskNoticeText" i18n="motorsRemapDialogRiskNotice"></p>
            <div class="motorsRemapToggleParentContainer">
                <div class="motorsRemapToggleNarrow">
                    <input id="motorsEnableTestMode-dialogMotorOutputReorder" type="checkbox" class="toggle"/>
                </div>
                <div class="motorsRemapToggleWide">
                    <span class="motorsEnableTestMode motorsRemapDialogRiskNoticeText" i18n="motorsRemapDialogUnderstandRisks"></span>
                </div>
            </div>
            <div class="motorsRemapDialogRExplanationText" i18n="motorsRemapDialogExplanations"></div>
        </div>
        <div class="buttons">
            <a href="#" id="dialogMotorOutputReorderAgreeButton" class="regular-button" i18n="motorOutputReorderDialogAgree"></a>
        </div>
    </div>
</div>
